<template>
  <div id="chargesDetails">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="charges_hd">
      <p>{{routeName}}</p>
    </div>
    <div class="charges_box">
      <div class="charges_list" v-if="orderType == '拼车'">
        <p class="charges_list_one">起步价(分时段)</p>
        <p class="charges_list_two">
          普通时段
          <span>{{carpoolPrice}}元/人</span>
        </p>
        <p class="charges_list_two" v-for="(item,index) in priceList" :key="index" v-show="priceList.length">
          <b v-if="priceList[index].unitPrice !=0.0">
            {{priceList[index].startTime}}-{{priceList[index].endTime}}
            <span>{{ priceList[index].unitPrice }}{{priceList[index].unit==="2" ? "%" : "元/人"}}</span>
          </b>
        </p>
      </div>
      <div v-else>
        <div class="charges_list">
          <p class="charges_list_one">起步价(分时段)</p>
          <p class="charges_list_two">
            普通时段
            <span>{{gongwuStartPrice}}元</span>
          </p>
          <p class="charges_list_two" v-for="(item,index) in priceList" :key="index" v-show="priceList.length">
            <b v-if="priceList[index].gongwuPrice !=0.0">
              {{priceList[index].startTime}}-{{priceList[index].endTime}}
              <span>{{ priceList[index].gongwuPrice }}{{priceList[index].unit==="2" ? "%" : "元"}}</span>
            </b>
          </p>
          <p class="charges_list_two">公务车最多可乘坐4人</p>
        </div>
        <div class="charges_list">
          <p class="charges_list_one">起步价(分时段)</p>
          <p class="charges_list_two">
            普通时段
            <span>{{shangwuStartPrice}}元</span>
          </p>
          <p class="charges_list_two" v-for="(item,index) in priceList" :key="index" v-show="priceList.length">
            <b v-if="priceList[index].shangwuPrice !=0.0">
              {{priceList[index].startTime}}-{{priceList[index].endTime}}
              <span>{{ priceList[index].shangwuPrice }}{{priceList[index].unit==="2" ? "%" : "元"}}</span>
            </b>
          </p>
          <p class="charges_list_two">商务车最多可乘坐6人</p>
        </div>
      </div>
      <div class="charges_list">
        <p class="charges_list_one">
          超出里程费
          <span class="charges_out">{{floatPrice}}元/公里</span>
        </p>
        <div v-if="orderType === '拼车'">
          <p class="charges_list_two">{{ allowOverMillageStart }}，{{ allowOverMillageEnd }}</p>
        </div>
        <div v-else>
          <p class="charges_list_two" v-if="carType == '公务车'">起步里程{{gongwuStartMileage}}公里(超出后收取超出里程费用)</p>
          <p class="charges_list_two" v-else>起步里程{{shangwuStartMileage}}公里(超出后收取超出里程费用)</p>
        </div>
      </div>
      <div class="charges_list" v-if="orderType == '包车'">
        <p class="charges_list_one" v-if="sleepPrice!=0">
          高速费
          <span>{{sleepPrice}}元</span>
        </p>
      </div>
      <div class="charges_list">
        <p class="charges_list_one">取消行程手续费</p>
        <p class="charges_list_two">
          普通时段
          <span>{{orderCanceFee}}</span>
        </p>
        <p class="charges_list_two" v-for="(item,index) in timePriceCancelItemsList" :key="index" v-show="timePriceCancelItemsList.length">
          <b v-if="timePriceCancelItemsList[index].unitPrice !=0.0">
            {{timePriceCancelItemsList[index].startTime}}-{{timePriceCancelItemsList[index].endTime}}
            <span>{{timePriceCancelItemsList[index].unitPrice}}{{timePriceCancelItemsList[index].unit==="2" ? "%" : "元"}}</span>
          </b>
        </p>
        <p class="charges_list_two">行程被指派司机后，取消行程会收取手续费</p>
      </div>
      <div class="charges_list">
        <p class="charges_list_one">站点浮动费</p>
        <p class="charges_list_two">站点上车有浮动费用</p>
      </div>
    </div>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '计价规则',
      priceList: [], // 起步价时段列表
      timePriceCancelItemsList: [], // 取消行程时间段列表
      routeName: '', // 路线名称
      orderType: '',
      carType: '', // 包车类型
      timePriceItems: '',
      timePriceCancelItems: '',
      gongwuStartPrice: '0.00', // 公务车起步价
      gongwuStartMileage: '0', // 公务车起步里程数
      shangwuStartMileage: '0', // 商务车起步里程数
      shangwuStartPrice: '0.00', // 商务车起步价
      floatPrice: '0.00', // 超出里程费/每公里
      carpoolFenceDistanceStart: '0',
      carpoolFenceDistanceEnd: '0',
      sleepPrice: '',
      orderCanceFee: '',
      IsTopbar: true,
      carpoolPrice: '0.00' // 拼车起步价
    };
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
    if (this.$route.query.orderno) {
      let params = {
        cost_id: this.$route.query.orderno
      };
      Loading.show();
      http.post('/pakj/order/getCostEstimatDetail', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.routeName = res.data.data.routeName;
          this.orderType = res.data.data.orderType;
          this.carType = res.data.data.carType;
          this.carpoolPrice = res.data.data.carpoolPrice;
          this.timePriceItems = res.data.data.timePriceItems;
          this.timePriceCancelItems = res.data.data.timePriceCancelItems;
          this.floatPrice = res.data.data.floatPrice;
          this.orderCanceFee = res.data.data.orderCanceFee;
          this.gongwuStartPrice = res.data.data.gongwuStartPrice; // 公务车起步价
          this.shangwuStartPrice = res.data.data.shangwuStartPrice; // 商务车起步价
          this.shangwuStartMileage = res.data.data.shangwuStartMileage; // 商务车起步里程
          this.gongwuStartMileage = res.data.data.gongwuStartMileage; // 公务车起步里程
          this.carpoolFenceDistanceStart = res.data.data.carpoolFenceDistanceStart;
          this.carpoolFenceDistanceEnd = res.data.data.carpoolFenceDistanceEnd;
          this.sleepPrice = res.data.data.sleepPrice;
          if (this.timePriceItems) {
            let timePriceItems = JSON.parse(this.timePriceItems);
            for (let k in timePriceItems) {
              if (timePriceItems[k].unitPrice !== '0.0') {
                this.priceList.push(timePriceItems[k]);
              }
            }
          }
          if (this.timePriceCancelItems) {
            let timePriceCancelItems = JSON.parse(this.timePriceCancelItems);
            for (let k in timePriceCancelItems) {
              if (timePriceCancelItems[k].unitPrice !== '0.0') {
                this.timePriceCancelItemsList.push(timePriceCancelItems[k]);
              }
            }
          }
          console.log(res.data);
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  },
  methods: {},
  computed: {
    allowOverMillageStart() {
      if (this.carpoolFenceDistanceStart === '0' || this.carpoolFenceDistanceStart === '0.0') {
        return '仅限起点围栏内下单';
      } else {
        return '超出起点围栏' + this.carpoolFenceDistanceStart + '公里可下单';
      }
    },
    allowOverMillageEnd() {
      if (this.carpoolFenceDistanceEnd === '0' || this.carpoolFenceDistanceEnd === '0.0') {
        return '仅限终点围栏内下单';
      } else {
        return '超出终点围栏' + this.carpoolFenceDistanceEnd + '公里可下单';
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#chargesDetails {
  height: 100vh;
  background-color: #fff;
}

.charges_hd {
  background-color: #fff;
  margin-top: 20px;
}

.charges_hd p {
  padding-top: 70px;
  text-align: center;
  font-size: 36px;
  color: #333;
  padding-bottom: 40px;
}

.charges_box {
  background-color: #fff;
  padding: 0px 82px 40px 82px;
}

.charges_list {
  padding-top: 24px;
}

.charges_list_one {
  font-size: 28px;
  color: #666;
}

.charges_list_two {
  font-size: 22px;
  color: #999;
  margin-top: 10px;
}

.charges_list_two span {
  float: right;
}

.charges_out {
  float: right;
}
</style>
